<template>
	<view class="detailLayout">
		<view class="tripDetail driverbg">
			<trip-tab-group></trip-tab-group>
<!-- 			<view class="is_browsed">
				<image src="../../static/images/browsed.png" mode="aspectFill"></image>
			</view> -->
			<view class="box">
				<view class="head">
					<view class="day">{{dayShowText}}</view>
					<view class="time">
						<view class="start_time">{{startTime}}</view>
						<view class="time_connect">-</view>
						<view class="end_time">{{endTime}}</view>
					</view>
					<view class="text">出发</view>
				</view>
				<view class="pos pos_start">
					<view class="left">
						<image class="pic" src="../../common/images/qidian.png" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="area">{{from_region}}</view>
						<view class="detail">{{formData.from_detail}}</view>
					</view>
				</view>
				<view class="pos pos_end">
					<view class="left">
						<image class="pic" src="../../common/images/zhongdian.png" mode="aspectFill"></image>						
					</view>
					<view class="right">
						<view class="area">{{to_region}}</view>
						<view class="detail">{{formData.to_detail}}</view>
					</view>
				</view>
				<view class="supple">
					<view class="left">要  求:</view>
					<view class="right">{{requireContent}}</view>
				</view>
				<view class="route">
					<view class="left">路线图:</view>
					<view class="right" @click="clickRoute">
						<view class="text">点击查看</view>
						<image class="pic" src="../../common/images/route.png" mode=""></image>
					</view>
				</view>
				
				<view class="price">
					<view class="left">
						起步价：
					</view>
					<view class="right">
						<view class="value">{{formData.predict_price}}+</view>
						<view class="text">
							元
						</view>
					</view>
				</view>	
											
											
				<view class="tags">
					<view class="tag">车主热情</view>
					<view class="tag">驾驶稳健</view>
					<view class="tag">车内整洁</view>
				</view>
				
				<view class="bottom">
					<view class="line"></view>
					<view class="outer">
						<view class="user_info">
							<view class="avatar">
								<image src="../../common/images/people/img钟离.webp" mode="aspectFill"></image>
							</view>
							<view class="phone_tail">
								尾号3347
							</view>
							<view class="online_status " v-if="false">
								· 刚刚在线
							</view>
							<view class="online_status online" v-else="true">
								· 在线
							</view>
						</view>
						<view class="number" v-if="lookState">共33人看过</view>
					</view>
				</view>
			</view>

		</view>
		
		<view class="comment">
			<view class="list">
				<view class="row">
					<comment-item :subReply="true"></comment-item>
				</view>
			</view>
		</view>
		<view class="interactive">
			<interactive-bar :showType="1" @comment="handelComment"></interactive-bar>
			<view class="safe-area-bottom"></view>
		</view>
		<uni-popup type="center" ref="routePicPopup" :mask-click="false">
			<view class="preview" @click="clickPreview">
				<image class="pic" src="../../common/images/route_demo.jpeg" mode="aspectFit"></image>
			</view>
		</uni-popup>
		
		<uni-popup type="bottom" ref="commentPopup">
			<comment-reply></comment-reply>
		</uni-popup>
	</view>
</template>

<script setup>
defineProps({
	lookState: {
		type: Boolean,
		default: true
	}
})
import { ref,computed } from 'vue';
import {showToast,stateFormat, getTimeText, convertRegion, getHourMinByTimestamp} from "@/utils/common.js"
import {onLoad} from "@dcloudio/uni-app"
	
const commentPopup = ref(null);
const routePicPopup = ref(null)
const db = uniCloud.database();
const id = ref("")
const formData = ref({})

onLoad((e)=>{
	id.value = e.id
	if(id.value){
		uni.showLoading({
			title:"加载中...",
			mask:true
		})
		getDetail();
		uni.setNavigationBarTitle({
			title:"编辑行程"
		})
	}
})

//获取单条数据
const getDetail = async()=>{
	let data = uni.getStorageSync(id.value)
	formData.value = data
	console.log("data:", data);
	uni.hideLoading()
}

const requireContent = computed(()=>{
	const content = formData.value.content;
	// 检查所有可能的空值情况
	if (!content || content.trim().length === 0) {
	    return "请准时到达，谢谢~";
	}
	return content;
})

const dayShowText = computed(()=>{
	return getTimeText(formData.value.start_time)
})

const startTime = computed(()=>{
	return getHourMinByTimestamp(formData.value.start_time)
})

const endTime = computed(()=>{
	return getHourMinByTimestamp(formData.value.end_time)
})
	
const from_region = computed(()=>{
	return convertRegion(formData.value.from_region)
})

const to_region = computed(()=>{
	return convertRegion(formData.value.to_region)
})	

// 打开评论框
const handelComment = ()=>{
	commentPopup.value.open();
}

// 点击地图线路
const clickRoute = ()=>{
	if (formData.value.map_url){
		routePicPopup.value.open()
	}
	else{
		showToast("发布者未上传路线图","none",false);
	}
}

// 点击地图线路的图片
const clickPreview = ()=>{
	routePicPopup.value.close()
}

</script>

<style lang="scss" scoped>
	.detailLayout {
		.tripDetail {
			padding: 50rpx 30rpx;
			border-bottom: 12rpx solid #F7F7F7;
			.is_browsed{
				position: absolute;
				width: 80rpx;
				height: 80rpx;
				right: 10rpx;
				top: 10rpx;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.1);
				image {
					width: 100%;
					height: 100%;					
					opacity: 0.3;
					transition: opacity 0.3s ease-in-out;
				}
			}
			.box {
				margin-top: 30rpx;
				.head {
					display: flex;
					justify-content: flex-start;
					align-items: flex-end;
					padding: 12rpx 0;
					font-weight: 900;

					.day {
						margin-right: 8rpx;
						font-size: 50rpx;
					}

					.time {
						display: flex;
						justify-content: center;
						align-items: flex-end;
						font-size: 45rpx;
						margin-bottom: -2rpx;

						.start_time,
						.end_time {
							margin: 0 8rpx;
						}
					}

					.text {
						font-size: 30rpx;
					}
				}

				.pos_start {
					.left {
						margin-right: 20rpx;
						justify-content: center;
						align-items: center;
						padding: 10rpx;					
					}
				}

				.pos_end {
					.left {
						margin-right: 20rpx;
						justify-content: center;
						align-items: center;
						padding: 10rpx;
					}
				}

				.pos {
					display: flex;
					// flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					padding-top: 12rpx;
					.pic{
						width: 40rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.left {
						padding-right: 5rpx;
						font-size: 30rpx;
					}

					.right {
						.area {
							font-size: 30rpx;
							font-weight: bold;
							color: #333;
						}

						.detail {
							font-size: 25rpx;
							color: #666;
						}
					}
				}
				.tags{
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					.tag{					
						padding: 5rpx 10rpx;
						margin-right: 20rpx;
						font-size: 20rpx;
						border-radius: 10rpx;	
						box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2),
										-2px -2px 5px rgba(255, 255, 255, 0.5); /* 阴影效果 */
					}
					
					/* 使用伪类选择器定义不同的背景和字体颜色 */
					.tag:nth-child(1) {
						background: #f9cdad;
						color: #fe4365; /* 深红色字体 */
					}
					
					.tag:nth-child(2) {
						background-color: #F9D08B; /* 浅绿色背景 */
						color: #F97D81; /* 深绿色字体 */
					}
					
					.tag:nth-child(3) {
						background-color: #ccccff; /* 浅蓝色背景 */
						color: #4F86C6; /* 深蓝色字体 */
					}
				}
				.supple{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding-top: 12rpx;
					font-size: 30rpx;
					color: #676767;
					.left {
						padding-right: 15rpx;
					}
					.right{
						background: #f3f3f3;
						padding: 5rpx 15rpx;
						border-radius: 10rpx;
					}
				}	
				.route{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding-top: 12rpx;
					font-size: 30rpx;
					color: #676767;
					.left {
						padding-right: 15rpx;
					}
					.right{
						display: flex;
						justify-content: center;
						align-items: center;
						background: #f3f3f3;
						padding: 5rpx 15rpx;
						border-radius: 10rpx;
						.text{
							color: #4F86C6;
						}
						.pic{
							width: 40rpx;
							height: 40rpx;
							padding-left: 10rpx;
							color: #4F86C6;
						}
					}
				}	
				
				.price{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 30rpx;
					.left {
						padding-right: 5rpx;
						font-size: 30rpx;
						color: #676767;
					}
					.right{
						display: flex;
						justify-content: center;
						align-items: flex-end;
						.value{
							font-size: 50rpx;							
							margin-left: 5rpx;							
							font-weight: 900;
							padding-right: 10rpx;
							color: #F1A94E;
						}
						.text{
							padding-bottom: 10rpx;
						}
					}
				}
				.bottom {
					.line {
						width: 100%;
						height: 3rpx;
						background: #f0f0f0;
						margin: 30rpx 0;
					}

					.outer {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.number {
							font-size: 26rpx;
							color: #999;
						}

						.user_info {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							// background: #888;
							width: fit-content;

							.avatar {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.phone_tail {
								padding-left: 12rpx;
								font-size: 30rpx;
								font-weight: bold;
								margin-right: 10rpx;
							}

							.online_status {
								padding: 10rpx 15rpx;
								background-color: #f2f2f2;
								border-radius: 20rpx;
								font-size: 25rpx;
								font-weight: bold;
								color: #626262;
							}

							.online {
								color: #53b53c;
								background-color: #eef9ef;
							}
						}
					}



				}
			}

		}
	
		.interactive{			
			position: fixed;	// 固定定位
			width: 100%;
			bottom: 0;
			left: 0;
			background: #fff;
			border-top: 1rpx solid #e4e4e4;
		}
	}
	
.preview{
	.pic{
		width: 90vh;
		height: 80vh;
		
	}
}
</style>